<template>
	<div>
		<main-content
			v-if="pageType === 'i'"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="queryForm"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('report.rebate_cycle')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="queryTime"
							:picker-options="pickerOptionsMonth"
							format="yyyy-MM"
							type="monthrange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							:clearable="false"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.lock_status')}:`"
						prop="lockStatus"
						class="flex-row-container"
						label-width="77px"
					>
						<el-select
							v-model="queryData.lockStatus"
							style="width: 200px"
							:placeholder="$t('common.select_all')"
							clearable
						>
							<el-option
								v-for="item in lockOrderType"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item class="flex-row-container ptop">
						<el-select
							v-model="dateFlag"
							style="width: 140px"
							:placeholder="$t('common.please_choose')"
						>
							<el-option label="代理账号" value="0" />
							<el-option label="总代账号" value="1" />
							<el-option label="订单号" value="2" />
						</el-select>
						<el-input
							v-if="dateFlag == '0'"
							v-model.trim="queryData.proxyName"
							clearable
							style="width: 180px"
							:placeholder="$t('common.please_enter')"
							v-input="{ name: 'num_alp' }"
						></el-input>
						<el-input
							v-if="dateFlag == '1'"
							v-model.trim="queryData.topProxyName"
							clearable
							style="width: 180px"
							:placeholder="$t('common.please_enter')"
							v-input="{ name: 'num_alp' }"
						></el-input>
						<el-input
							v-if="dateFlag == '2'"
							v-model.trim="queryData.orderNo"
							clearable
							style="width: 180px"
							:placeholder="$t('common.please_enter')"
							v-input="{ name: 'num_alp' }"
						></el-input>
					</el-form-item>
					<el-form-item
						label="综合佣金:"
						prop="lockAccount"
						class="flex-row-container"
						label-width="77px"
					>
						<el-input
							v-model="queryData.minCommissionAmount"
							size="medium"
							clearable
							style="width: 130px"
							:placeholder="$t('common.minimum')"
							maxLength="15"
							v-input="{ name: 'onlyTwoNum' }"
							name="minCommissionAmount"
							@blur="
								handleAmount(
									queryData,
									1,
									'minCommissionAmount',
									'maxCommissionAmount',
									$t(
										'funds.proxy_member_funds_record.form_search_rebateCheck1'
									)
								)
							"
						></el-input>
						-
						<el-input
							v-model="queryData.maxCommissionAmount"
							size="medium"
							clearable
							style="width: 130px"
							:placeholder="$t('common.maximum')"
							maxLength="15"
							v-input="{ name: 'onlyTwoNum' }"
							name="maxCommissionAmount"
							@blur="
								handleAmount(
									queryData,
									2,
									'minCommissionAmount',
									'maxCommissionAmount',
									$t(
										'funds.proxy_member_funds_record.form_search_rebateCheck2'
									)
								)
							"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						prop="merchantId"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('90810086')"
							icon="el-icon-download"
							type="warning"
							:disabled="exportBtnLoading"
							:loading="exportBtnLoading"
							size="medium"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
						<el-button
							type="success"
							icon="el-icon-sort"
							:disabled="loading"
							size="medium"
							@click="openColSettings"
						>
							{{ $t('common.row_set') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<div
					v-if="
						hasPermission('90810080') || hasPermission('90810081')
					"
				>
					<el-tabs v-model="activeName" @tab-click="switchPage">
						<el-tab-pane
							v-if="hasPermission('90810080')"
							:label="$t('funds.fund_audit.wait_audit_1')"
							name="1"
						></el-tab-pane>
						<el-tab-pane
							v-if="hasPermission('90810081')"
							:label="$t('funds.fund_audit.wait_audit_2')"
							name="2"
						></el-tab-pane>
					</el-tabs>
					<el-table
						v-loading="loading"
						element-loading-spinner="el-icon-loading"
						border
						size="mini"
						class="small-size-table"
						:data="tableData"
						style="width: 100%"
						highlight-current-row
						:header-cell-style="getRowClass"
						:max-height="tableHeight"
					>
						<el-table-column
							align="center"
							:label="$t('funds.fund_audit.lock')"
							min-width="60"
						>
							<template slot-scope="scope">
								<el-checkbox
									v-if="hasPermission('90810082')"
									v-model="scope.row.lockOrder"
									:disabled="!showLock(scope.row)"
									@change="lockOne($event, scope.row.orderNo)"
								></el-checkbox>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="auditStep"
							align="center"
							:label="$t('common.actions')"
							min-width="150"
							v-if="tableColumnData[$t('funds.fund_audit.audit')]"
						>
							<template slot-scope="scope">
								<el-button
									:class="
										scope.row.auditName !== userName
											? 'dis'
											: ''
									"
									type="primary"
									size="medium"
									@click="openDetail(scope.row)"
								>
									{{ $t('funds.fund_audit.audit') }}
								</el-button>
							</template>
						</el-table-column>

						<el-table-column
							prop="orderNo"
							align="center"
							:label="$t('funds.order_no')"
							min-width="280"
							show-overflow-tooltip
							v-if="tableColumnData[$t('funds.order_no')]"
						>
							<template slot-scope="scope">
								<Copy :title="scope.row.orderNo" :copy="copy">
									{{ scope.row.orderNo }}
								</Copy>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							:label="`${$t('report.rebate_cycle')}`"
							min-width="200"
							show-overflow-tooltip
							v-if="tableColumnData[$t('report.rebate_cycle')]"
						>
							<template slot-scope="scope">
								{{
									getRebateCycle(
										scope.row.cycleStartDate,
										scope.row.cycleEndDate
									)
								}}
								<!-- {{ scope.row.startTime }} - {{  scope.row.endTime }} -->
							</template>
						</el-table-column>
						<el-table-column
							prop="proxyName"
							align="center"
							:label="$t('funds.proxy_name')"
							min-width="150"
							show-overflow-tooltip
							v-if="tableColumnData[$t('funds.proxy_name')]"
						>
							<template slot-scope="scope">
								<Copy :title="scope.row.proxyName" :copy="copy">
									{{ scope.row.proxyName }}
								</Copy>
							</template>
						</el-table-column>
						<el-table-column
							prop="businessModel"
							align="center"
							:label="`${$t('common.business_model')}`"
							v-if="tableColumnData[$t('common.business_model')]"
						>
							<template slot-scope="scope">
								{{
									mappingBusinessModel(
										scope.row.businessModel
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							prop="proxyLevel"
							align="center"
							:label="
								$t(
									'funds.proxy_member_funds_record.proxy_level_name'
								)
							"
							min-width="150"
							show-overflow-tooltip
							v-if="
								tableColumnData[
									$t(
										'funds.proxy_member_funds_record.proxy_level_name'
									)
								]
							"
						>
							<template slot-scope="scope">
								{{ scope.row.proxyLevel }}
							</template>
						</el-table-column>

						<el-table-column
							prop="merchantName"
							align="center"
							:label="
								$t(
									'funds.proxy_member_funds_record.parent_proxy_account'
								)
							"
							min-width="150"
							show-overflow-tooltip
							v-if="
								tableColumnData[
									$t(
										'funds.proxy_member_funds_record.parent_proxy_account'
									)
								]
							"
						>
							<template slot-scope="scope">
								<span v-if="scope.row.parentProxyName === '-'">
									{{ scope.row.parentProxyName }}
								</span>
								<Copy
									v-else
									:title="scope.row.parentProxyName"
									:copy="copy"
								>
									{{ scope.row.parentProxyName }}
								</Copy>
							</template>
						</el-table-column>
						<el-table-column
							prop="topProxyName"
							align="center"
							:label="
								$t(
									'funds.proxy_member_funds_record.top_proxy_name'
								)
							"
							min-width="150"
							show-overflow-tooltip
							v-if="
								tableColumnData[
									$t(
										'funds.proxy_member_funds_record.top_proxy_name'
									)
								]
							"
						>
							<template slot-scope="scope">
								<Copy
									:title="scope.row.topProxyName"
									:copy="copy"
								>
									{{ scope.row.topProxyName }}
								</Copy>
							</template>
						</el-table-column>

						<!-- <el-table-column
							prop="merchantName"
							align="center"
							:label="$t('common.belong_merchant')"
							min-width="150"
							show-overflow-tooltip
						>
							<template slot-scope="scope">
								{{ merchantFilter(scope.row.merchantId) }}
							</template>
						</el-table-column> -->

						<el-table-column
							prop="otherMemberNetAmount"
							align="center"
							:label="
								$t(
									'funds.other_venues_member_game_wins_and_losses'
								)
							"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t(
										'funds.other_venues_member_game_wins_and_losses'
									)
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.otherMemberNetAmount
										)
									"
								>
									<el-link
										class="lightBlueColor"
										type="primary"
										@click="memberGameDialogFn(scope.row)"
									>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.otherMemberNetAmount
											)
										}}
									</el-link>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="otherMemberRebateAmount"
							align="center"
							:label="
								$t(
									'funds.total_rebate_for_members_of_other_venues'
								)
							"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t(
										'funds.total_rebate_for_members_of_other_venues'
									)
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.otherMemberRebateAmount
										)
									"
								>
									<!-- <el-link
										class="lightBlueColor"
										type="primary"
										@click="memberRebateDetailFn(scope.row)"
									> -->
										{{
											handleTotalNumber(
												'USDT',
												scope.row
													.otherMemberRebateAmount
											)
										}}
									<!-- </el-link> -->
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="otherMemberAccountAdjustAmount"
							align="center"
							label="会员账户调整"
							show-overflow-tooltip
							min-width="200"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row
												.otherMemberAccountAdjustAmount
										)
									"
								>
									{{
										handleTotalNumber(
											'USDT',
											scope.row
												.otherMemberAccountAdjustAmount
										)
									}}
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="otherProxyNetAmount"
							align="center"
							:label="
								$t(
									'funds.other_venue_agency_net_profit_and_loss'
								)
							"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t(
										'funds.other_venue_agency_net_profit_and_loss'
									)
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.otherProxyNetAmount
										)
									"
								>
									<span>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.otherProxyNetAmount
											)
										}}
									</span>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="otherCommissionRate"
							align="center"
							:label="$t('funds.other_venue_commission_rates')"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t('funds.other_venue_commission_rates')
								]
							"
						>
							<template slot-scope="scope">
								{{
									handlePercentage(
										scope.row.otherCommissionRate
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							prop="otherPartsAmount"
							align="center"
							:label="$t('funds.other_venue_commissions')"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t('funds.other_venue_commissions')
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.otherPartsAmount
										)
									"
								>
									<span>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.otherPartsAmount
											)
										}}
									</span>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="clubPartsAmount"
							align="center"
							:label="$t('funds.texas_club_service_fee_sharing')"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t('funds.texas_club_service_fee_sharing')
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.clubPartsAmount
										)
									"
								>
									<el-link
										class="lightBlueColor"
										type="primary"
										@click="
											servicecCntribuerDialogFn(scope.row)
										"
									>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.clubPartsAmount
											)
										}}
									</el-link>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="insurePartsAmount"
							align="center"
							:label="$t('funds.texas_club_insurance_share')"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t('funds.texas_club_insurance_share')
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.insurePartsAmount
										)
									"
								>
									<el-link
										class="lightBlueColor"
										type="primary"
										@click="
											servicecInsureDialogFn(scope.row)
										"
									>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.insurePartsAmount
											)
										}}
									</el-link>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="clubValueAddedPartsAmount"
							align="center"
							:label="
								$t(
									'funds.texas_value_added_service_consumption_sharing'
								)
							"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t(
										'funds.texas_value_added_service_consumption_sharing'
									)
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.clubValueAddedPartsAmount
										)
									"
								>
									<el-link
										class="lightBlueColor"
										type="primary"
										@click="clubAmountDialogFn(scope.row)"
									>
										{{
											handleTotalNumber(
												'USDT',
												scope.row
													.clubValueAddedPartsAmount
											)
										}}
									</el-link>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="lastMonthBalance"
							align="center"
							label="分红"
							show-overflow-tooltip
							min-width="200"
						>
							<template slot-scope="scope">
								{{
									handleTotalNumber(
										'USDT',
										scope.row.dividendAmount
									)
								}}
							</template>
						</el-table-column>
						<el-table-column
							prop="lastMonthBalance"
							align="center"
							:label="
								$t(
									'funds.proxy_member_funds_record.total_last_amount'
								)
							"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t(
										'funds.proxy_member_funds_record.total_last_amount'
									)
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.lastMonthBalance
										)
									"
								>
									<span>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.lastMonthBalance
											)
										}}
									</span>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="commissionAmount"
							align="center"
							:label="$t('funds.comprehensive_commission')"
							show-overflow-tooltip
							min-width="200"
							v-if="
								tableColumnData[
									$t('funds.comprehensive_commission')
								]
							"
						>
							<template slot-scope="scope">
								<p
									:style="
										handleNumberColor(
											scope.row.commissionAmount
										)
									"
								>
									<span>
										{{
											handleTotalNumber(
												'USDT',
												scope.row.commissionAmount
											)
										}}
									</span>
								</p>
							</template>
						</el-table-column>
						<el-table-column
							prop="lockStatus"
							align="center"
							:label="$t('funds.fund_audit.audit_status')"
							min-width="180"
							v-if="
								tableColumnData[
									$t('funds.fund_audit.audit_status')
								]
							"
						>
							<template slot-scope="scope">
								<span
									:class="
										Number(scope.row.lockStatus) === 1
											? 'lockingRgba'
											: 'deleteRgba'
									"
								>
									{{
										typeFilter(
											scope.row.lockStatus,
											'auditStatus'
										)
									}}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="lockTime"
							align="center"
							:label="$t('funds.fund_audit.lock_time')"
							min-width="220"
							show-overflow-tooltip
							v-if="
								tableColumnData[
									$t('funds.fund_audit.lock_time')
								]
							"
						>
							<template slot-scope="scope">
								<span v-if="!!scope.row.lockTime">
									{{ scope.row.lockTime | getTime }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
						<el-table-column
							prop="auditName"
							align="center"
							:label="$t('funds.fund_audit.lock_account')"
							min-width="150"
							show-overflow-tooltip
							v-if="
								tableColumnData[
									$t('funds.fund_audit.lock_account')
								]
							"
						>
							<template slot-scope="scope">
								{{ scope.row.auditName || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							prop="createdTime"
							align="center"
							:label="$t('funds.apply_time')"
							min-width="180"
							show-overflow-tooltip
							v-if="tableColumnData[$t('funds.apply_time')]"
						>
							<template slot-scope="scope">
								<span v-if="scope.row.createdTime">
									{{ scope.row.createdTime | getTime }}
								</span>
								<span v-else>-</span>
							</template>
						</el-table-column>
					</el-table>
					<el-row v-if="tableData.length">
						<el-col :span="24">
							<div class="grid-content">
								<el-checkbox
									v-if="hasPermission('90810083')"
									v-model="lockedAllStatus"
									:label="$t('common.all')"
									name="type"
									:disabled="lockedAllDisabled"
									@change="lockAll"
								></el-checkbox>
								<el-button
									v-if="hasPermission('90810085')"
									type="primary"
									size="medium"
									style="margin-left: 20px"
									:disabled="lockedArr.length === 0"
									@click="openBatchReviewDialog"
								>
									{{ $t('funds.fund_audit.batcha_audit') }}
								</el-button>
							</div>
						</el-col>
					</el-row>
					<!-- 分页 -->
					<el-pagination
						v-if="
							hasPermission('90810080') ||
							hasPermission('90810081')
						"
						:current-page.sync="pageNum"
						class="pageValue"
						v-show="!!total"
						background
						layout="total, sizes,prev, pager, next, jumper"
						:page-size="pageSize"
						:page-sizes="pageSizes"
						:total="total"
						:pager-count="9"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					></el-pagination>
				</div>
				<el-empty
					v-else
					:description="$t('funds.jurisdiction_tip')"
				></el-empty>
			</template>
		</main-content>
		<detail
			v-else
			:allow-audit="allowAudit"
			:detail-data="detailData"
			:activeName="activeName"
			@goBack="goBack"
		></detail>
		<el-dialog
			class="batch-review"
			:title="$t('funds.fund_audit.batcha_audit')"
			width="700px"
			:visible.sync="batchReviewDialog.visible"
			@close="onBatchReviewDialogClose"
		>
			<template>
				<div class="review-wrapper">
					<div class="top">
						<el-row>
							<el-col :span="12" class="title border-right">
								{{ $t('funds.fund_audit.audit_number') }}
							</el-col>
							<el-col :span="12" class="title">
								{{ $t('funds.fund_audit.audit_amount') }}
							</el-col>
							<el-col :span="12" class="border-right">
								<el-link
									type="primary"
									@click="batchReviewDialog.pageType = 'd'"
								>
									{{ batchReviewDialog.totalRecords }}
								</el-link>
							</el-col>
							<el-col :span="12" class="amounts-list">
								<div>
									<div
										v-for="item in Object.keys(
											batchReviewDialog.amounts
										)"
										:key="item"
									>
										{{ handleCurrency(item) }}
										{{
											handleNumber(
												item,
												batchReviewDialog.amounts[item]
											)
										}}
									</div>
								</div>
							</el-col>
						</el-row>
					</div>
					<div>
						<div
							v-if="batchReviewDialog.pageType === 'i'"
							class="bottom"
						>
							<el-form
								ref="batchAuditForm"
								:model="batchReviewDialog.formData"
								:rules="rules"
							>
								<div class="remark-wrapper">
									<div class="left">
										<span>
											{{
												$t(
													'funds.fund_audit.audit_remark'
												)
											}}:
										</span>
									</div>
									<div class="right">
										<el-form-item prop="remark">
											<el-input
												v-model.trim="
													batchReviewDialog.formData
														.remark
												"
												type="textarea"
												:rows="6"
												maxlength="500"
												show-word-limit
												v-input="{ name: 'noEmpty' }"
												:placeholder="
													$t(
														'funds.fund_audit.form_remark_placeholder'
													)
												"
												resize="none"
											></el-input>
										</el-form-item>
									</div>
								</div>
							</el-form>
						</div>
						<div v-else>
							<el-table
								v-loading="batchReviewDialog.loading"
								border
								height="311"
								size="mini"
								class="small-size-table"
								:data="lockedArr"
								style="width: 100%"
								:header-cell-style="{ background: '#e6e6e6' }"
							>
								<el-table-column
									align="center"
									type="index"
									:label="$t('common.serial_number')"
								></el-table-column>
								<el-table-column
									align="center"
									:label="$t('funds.proxy_name')"
									prop="proxyName"
								></el-table-column>
								<el-table-column
									align="center"
									label="综合佣金"
									prop="commissionAmount"
								>
									<template slot-scope="scope">
										{{ handleCurrency(scope.row.currency) }}
										{{
											handleNumber(
												scope.row.currency,
												scope.row.commissionAmount
											)
										}}
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</div>
				<div slot="footer">
					<div
						v-if="batchReviewDialog.pageType === 'i'"
						class="center-wrap"
					>
						<el-button
							:disabled="batchReviewDialog.loading"
							size="small"
							@click="batchReviewDialog.visible = false"
						>
							{{ $t('common.cancel') }}
						</el-button>
						<el-button
							:disabled="batchReviewDialog.loading"
							type="success"
							size="small"
							@click="openSeaMoonDialog(true, 1)"
						>
							<i
								v-show="
									batchReviewDialog.loading &&
									batchReviewDialog.btnType === 1
								"
								class="el-icon-loading"
							></i>
							{{
								activeName === '1'
									? $t('funds.fund_audit.audit_success_1')
									: $t('funds.fund_audit.audit_success_2')
							}}
						</el-button>
						<el-button
							:disabled="batchReviewDialog.loading"
							type="danger"
							size="small"
							@click="openSeaMoonDialog(true, 2)"
						>
							<i
								v-show="
									batchReviewDialog.loading &&
									batchReviewDialog.btnType === 2
								"
								class="el-icon-loading"
							></i>
							{{
								activeName === '1'
									? $t('funds.fund_audit.audit_fail_1')
									: $t('funds.fund_audit.audit_fail_2')
							}}
						</el-button>
					</div>
					<div v-else class="center-wrap">
						<el-button
							size="small"
							type="primary"
							@click="batchReviewDialog.pageType = 'i'"
						>
							{{ $t('common.sure') }}
						</el-button>
					</div>
				</div>
			</template>
		</el-dialog>
		<SeaMoonDialog
			:sea-moon-visible.sync="seaMoon.visible"
			:params="seaMoon.params"
			@success="onSeaMoonValidSucceed"
		></SeaMoonDialog>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<!-- 会员游戏输赢弹窗 -->
		<MemberGameDialog
			v-if="memberGameDialog"
			:visible.sync="memberGameDialog"
			@handleVisible="memberGameDialog = false"
			:orderNo="orderNo"
		></MemberGameDialog>
		<!-- 会员总返水弹窗 -->
		<MemberRebateDetail
			v-if="memberRebateDialog"
			:visible.sync="memberRebateDialog"
			@handleVisible="memberRebateDialog = false"
			:curData="curData"
		></MemberRebateDetail>
		<!-- 德州俱乐部服务费贡献明细弹窗 -->
		<ServicecCntribuerDialog
			v-if="servicecCntribuerDialog"
			:visible.sync="servicecCntribuerDialog"
			@handleVisible="servicecCntribuerDialog = false"
			:orderNo="orderNo"
		></ServicecCntribuerDialog>
		<!-- 德州俱乐部保险分成弹窗 -->
		<ServiceInsureDialog
			v-if="servicecInsureDialog"
			:visible.sync="servicecInsureDialog"
			@handleVisible="servicecInsureDialog = false"
			:orderNo="orderNo"
		></ServiceInsureDialog>
		<!-- 德州增值服务消费明细弹窗 -->
		<ClubAmountDialog
			v-if="clubAmountDialog"
			:visible.sync="clubAmountDialog"
			@handleVisible="clubAmountDialog = false"
			:orderNo="orderNo"
		></ClubAmountDialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername, getUserInfo } from '@/utils/auth'
import SeaMoonDialog from '@/components/SeaMoon'
import { Decimal } from 'decimal.js'
import MainContent from '@/components/MainContent/index.vue'
import ClubAmountDialog from '@/components/Funds/Commission/clubAmountDialog.vue'
import ServicecCntribuerDialog from '@/components/Funds/Commission/servicecCntribuerDialog.vue'
import ServiceInsureDialog from '@/components/Funds/Commission/serviceInsureDialog.vue'
import MemberGameDialog from '@/components/Funds/Commission/memberGameDialog.vue'
import MemberRebateDetail from '@/components/Funds/Commission/memberRebateDetail.vue'

const end = () => {
  return dayjs().endOf('month')
}
const start = () => {
  return dayjs()
    .subtract(3, 'month')
    .startOf('month')
}
const name = 'examenCommission'
export default {
  name: name,
  components: {
    detail: () => import('./components/detail'),
    SeaMoonDialog,
    MainContent,
    ClubAmountDialog,
    ServicecCntribuerDialog,
    ServiceInsureDialog,
    MemberGameDialog,
    MemberRebateDetail
  },
  filters: {
    getTime(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  mixins: [list],
  data() {
    return {
      exportBtnLoading: false,
      orderNo: '',
      clubAmountDialog: false,
      servicecCntribuerDialog: false,
      servicecInsureDialog: false,
      memberGameDialog: false,
      memberRebateDialog: false,
      tableHeight: 480,
      otherDependenComponents: ['reviewBtn', 'reviewTab'],
      queryData: {
        minCommissionAmount: undefined,
        maxCommissionAmount: undefined
      },
      queryTime: [start(), end()],
      allowAudit: false,
      pageType: 'i',
      detailData: {},
      now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      curData: {},
      auditDetailDialogVisible1: false,
      auditDetailDialogVisible2: false,
      auditDetailDialogVisible3: false,
      auditDetailDialogVisible4: false,
      auditDetailDialogVisible5: false,
      userName: '',
      activeName: '1',
      dateFlag: '0',
      tableData: [],
      proxyleveList: [],
      businessModelList: [
        {
          description: '现金业务',
          code: '1'
        },
        {
          description: '信用业务',
          code: '2'
        }
      ],
      lockedAllStatus: false,
      lockedAllDisabled: false,
      lockedArr: [],
      batchReviewDialog: {
        pageType: 'i',
        visible: false,
        btnType: '',
        loading: false,
        totalRebateAmount: 0,
        totalRecords: 0,
        amounts: {},
        formData: {
          remark: undefined,
          ids: []
        }
      },
      showClear1: false,
      showClear2: false,
      rules: {
        remark: [
          {
            required: true,
            message: this.$t('funds.fund_audit.form_rules_tip2'),
            trigger: 'blur'
          },
          {
            min: 2,
            max: 500,
            message: this.$t('funds.fund_audit.form_rules_tip2'),
            trigger: 'blur'
          }
        ]
      },
      timeList: [],
      rebateTimer: null,
      activeRebate: this.$t('funds.fund_audit.no_reload'),
      seaMoon: {
        isAudit: false,
        visible: false,
        params: {}
      },
      highTable: 0,
      colSettings: {
        visible: false,
        dialogColumnData: {}
      },
      activityListField: {
        [this.$t('funds.fund_audit.audit')]: true,
        [this.$t('funds.order_no')]: true,
        [this.$t('report.rebate_cycle')]: true,
        [this.$t('funds.proxy_name')]: true,
        [this.$t('common.business_model')]: true,
        [this.$t(
          'funds.proxy_member_funds_record.proxy_level_name'
        )]: true,
        [this.$t(
          'funds.proxy_member_funds_record.parent_proxy_account'
        )]: true,
        [this.$t(
          'funds.proxy_member_funds_record.top_proxy_name'
        )]: true,
        [this.$t(
          'funds.other_venues_member_game_wins_and_losses'
        )]: true,
        [this.$t(
          'funds.total_rebate_for_members_of_other_venues'
        )]: true,
        [this.$t('funds.other_venue_agency_net_profit_and_loss')]: true,
        [this.$t('funds.other_venue_commission_rates')]: true,
        [this.$t('funds.other_venue_commissions')]: true,
        [this.$t('funds.texas_club_service_fee_sharing')]: true,
        [this.$t('funds.texas_club_insurance_share')]: true,
        [this.$t(
          'funds.texas_value_added_service_consumption_sharing'
        )]: true,
        [this.$t(
          'funds.proxy_member_funds_record.total_last_amount'
        )]: true,
        [this.$t('funds.comprehensive_commission')]: true,
        [this.$t('funds.fund_audit.audit_status')]: true,
        [this.$t('funds.fund_audit.lock_time')]: true,
        [this.$t('funds.fund_audit.lock_account')]: true,
        [this.$t('funds.apply_time')]: true
      }
    }
  },
  computed: {
    lockOrderType() {
      return this.globalDics.lockStatus || []
    },
    orderStatusArr() {
      //  0-待一审 1-一审拒绝 2-待二审 3-二审拒绝 3-二审通过
      return [
        {
          code: '0',
          description: this.$t('funds.fund_audit.wait_audit_1')
        },
        {
          code: '1',
          description: this.$t('funds.fund_audit.audit_fail_1')
        },
        {
          code: '2',
          description: this.$t('funds.fund_audit.wait_audit_2')
        },
        {
          code: '3',
          description: this.$t('funds.fund_audit.audit_fail_2')
        },
        {
          code: '4',
          description: this.$t('funds.fund_audit.pass_the_audit')
        }
      ]
    }
  },
  watch: {},
  created() {
    this.initIndexDB('examenCommission', this.activityListField)
    if (this.hasPermission('90810080') || this.hasPermission('90810081')) {
      this.getKvconfigList()
    }
    if (this.hasPermission('90810080')) {
      this.activeName = '1'
    } else if (this.hasPermission('90810081')) {
      this.activeName = '2'
    } else {
      this.activeName = ''
    }
    this.userName = getUsername()
    this.userInfo = getUserInfo()
    this.getProxyleve()
  },

  activated() {
    if (this.hasPermission('90810080') || this.hasPermission('90810081')) {
      if (Number(this.activeRebate)) {
        this.rebateTimer = setInterval(
          this.loadData,
          this.activeRebate * 1000
        )
      } else {
        clearInterval(this.rebateTimer)
      }
    }
  },
  deactivated() {
    clearInterval(this.rebateTimer)
  },
  beforeDestroy() {
    clearInterval(this.rebateTimer)
    this.rebateTimer = null
  },
  mounted() { },
  methods: {
    // 其他游戏场馆会员输赢
    memberGameDialogFn(row) {
      this.orderNo = row.orderNo
      this.memberGameDialog = true
    },
    // 其他场馆会员总返水
    memberRebateDetailFn(row) {
      this.orderNo = row.orderNo
      this.curData = row
      this.memberRebateDialog = true
    },
    // 德州俱乐部服务费分成
    servicecCntribuerDialogFn(row) {
      this.orderNo = row.orderNo
      this.servicecCntribuerDialog = true
    },
    // 德州俱乐部保险分成
    servicecInsureDialogFn(row) {
      this.orderNo = row.orderNo
      this.servicecInsureDialog = true
    },
    // 德州增值服务消费分成
    clubAmountDialogFn(row) {
      this.orderNo = row.orderNo
      this.clubAmountDialog = true
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.container?.getBoundingClientRect()
        if (rect?.height) {
          this.highTable = window.innerHeight - rect.height - 350
        }
      })
    },
    onSeaMoonValidSucceed(data) {
      if (this.seaMoon.isAudit) {
        this.handleBatchReview()
      }
    },
    // isAudit: 是否是审核操作
    // type: 1 通过  2 拒绝
    openSeaMoonDialog(isAudit, type) {
      this.$refs.batchAuditForm.validate((valid) => {
        if (valid) {
          this.batchReviewDialog.btnType = type
          this.handleBatchReview()
        }
      })
    },
    search() {
      this.pageNum = 1
      clearInterval(this.rebateTimer)
      this.rebateTimer = null
      if (Number(this.activeRebate)) {
        this.rebateTimer = setInterval(
          this.loadData(),
          this.activeRebate * 1000
        )
      }
      this.loadData()
    },
    getProxyleve() {
      this.$api.getProxylevelnameList().then((res) => {
        this.proxyleveList = res.data || []
      })
    },
    getOrderStatusColor(row) {
      if (row.lockStatus === 1) {
        return 'lockingRgba'
      } else if ([0, 2].includes(Number(row.orderStatus))) {
        return 'disableRgba'
      }
    },
    recordTime(val) {
      this.activeRebate = val

      if (Number(val)) {
        clearInterval(this.rebateTimer)
        this.rebateTimer = setInterval(this.loadData, val * 1000)
      } else {
        clearInterval(this.rebateTimer)
      }
    },
    getKvconfigList() {
      this.timeList = []
      let str = ''
      let arr = []
      const params = {
        k: 'funds.audit.pagerefresh.interval.config',
        pageNum: 1,
        pageSize: 10
      }
      this.$api.getkvconfigQueryList(params).then((res) => {
        if (res.code === 200 && res.data) {
          const val = res.data.records[0] || []
          if (val.v) {
            str = val.v
            arr = str.split(',').sort()
            arr.forEach((item, index) => {
              const obj = {}
              if (Number(item) === 0) {
                obj.label = this.$t(
                  'funds.fund_audit.no_reload'
                )
                obj.value = this.$t(
                  'funds.fund_audit.no_reload'
                )
                this.timeList.push(obj)
                this.activeRebate = this.$t(
                  'funds.fund_audit.no_reload'
                )
                this.rebateTimer = null
              } else if (Number(item)) {
                obj.label =
                  item + this.$t('funds.fund_audit.second')
                obj.value = item
                this.timeList.push(obj)
              }
            })
          }
        }
      })
    },
    getRebateCycle(date1, date2) {
      date1 = date1 && dayjs(String(date1)).format('YYYY-MM-DD')
      date2 = date2 && dayjs(String(date2)).format('YYYY-MM-DD')

      if (date1 === date2) {
        return date1 || '-'
      } else {
        return date1 && date2 ? date1 + ' 至 ' + date2 : '-'
      }
    },
    showLock(rowData) {
      if (rowData.auditName) {
        return this.userName === rowData.auditName
      } else {
        return true
      }
    },
    switchPage() {
      this.pageNum = 1
      this.tableData = []
      this.search()
    },
    filterOrderStatus(code, lock) {
      if (lock === 1) {
        return this.activeName === '1'
          ? this.$t('funds.fund_audit.review_of_trial_1')
          : this.$t('funds.fund_audit.review_of_trial_2')
      } else {
        const item = this.orderStatusArr.find(
          (item) => item.code === String(code)
        )
        return item ? item.description : '-'
      }
    },
    handleParams() {
      const [startTime, endTime] = this.queryTime || []
      let params = {
        ...this.queryData,
        // qryType: this.activeName * 1,
        auditStatus: this.activeName == '1' ? [0] : [2], // 一审 二审
        reportYmStart: startTime
          ? dayjs(startTime)
            .format('YYYY-MM')
            .replace(/\-/g, '')
          : undefined,
        reportYmEnd: endTime
          ? dayjs(endTime)
            .format('YYYY-MM')
            .replace(/\-/g, '')
          : undefined
      }
      params = {
        ...this.getParams(params)
      }
      if (this.dateFlag == '0') {
        delete params.topProxyName
        delete params.orderNo
      } else if (this.dateFlag == '1') {
        delete params.proxyName
        delete params.orderNo
      } else if (this.dateFlag == '2') {
        delete params.proxyName
        delete params.topProxyName
      }
      return params
    },
    loadData() {
      if (!this.activeName) return
      this.loading = true
      this.lockedArr = []
      const params = this.handleParams()
      this.$api
        .getProxyCommissionAuditList(params)
        .then((res) => {
          this.now = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
          const { record, totalRecord } = res.data || {}
          this.loading = false
          this.tableData = record || []
          this.total = totalRecord || 0
          if (this.tableData) {
            // 未显示勾选数量
            let unableNum = 0
            this.tableData.forEach((item) => {
              item.lockOrder = Boolean(item.lockStatus)
              // 判断已经被当前账号锁单的记录
              if (
                item.lockStatus === 1 &&
                this.userName === item.auditName
              ) {
                this.lockedArr.push(item)
              }

              // 未显示勾选的记录
              if (
                item.lockStatus === 1 &&
                !(this.userName === item.auditName)
              ) {
                unableNum++
              }
            })
            this.lockedAllStatus =
              this.tableData.length ===
              this.lockedArr.length + unableNum
            this.lockedAllDisabled =
              unableNum === this.tableData.length
          }
        })
        .catch(() => {
          this.loading = false
        })
    },

    openDetail(rowData) {
      this.allowAudit = rowData.auditName == this.userName
      this.detailData = rowData
      this.pageType = 'd'
    },
    goBack() {
      this.pageType = 'i'
      this.loadData()
      // this.tableData = []
      // 	this.search()
    },
    reset() {
      this.queryData = {
        minCommissionAmount: undefined,
        maxCommissionAmount: undefined
      }
      this.queryTime = [start(), end()]
      this.pageNum = 1
      this.dateFlag = '0'
      this.search()
    },
    reloadTime() {
      this.queryTime = [start(), end()]
    },
    handleCurrentChange(val) {
      this.pageNum = val
      clearInterval(this.rebateTimer)
      this.rebateTimer = null
      if (Number(this.activeRebate)) {
        this.rebateTimer = setInterval(
          this.loadData,
          this.activeRebate * 1000
        )
      }
      this.loadData()
    },
    handleSizeChange(val) {
      this.pageSize = val
      clearInterval(this.rebateTimer)
      this.rebateTimer = null
      if (Number(this.activeRebate)) {
        this.rebateTimer = setInterval(
          this.loadData,
          this.activeRebate * 1000
        )
      }
      this.loadData()
    },
    handleLockOrder(data) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      this.$api
        .getProxyCommissionCashAuditLock(data)
        .then(() => {
          this.tableData = this.tableData.filter(() => true)
          this.$message({
            type: 'success',
            message: this.$t('common.action_success')
          })
          loading.close()
          this.pageNum = 1
          this.search()
        })
        .catch(() => {
          this.tableData = this.tableData.filter(() => true)
          this.search()
          loading.close()
        })
    },
    lockOne(status, id) {
      const data = {
        idList: [id],
        lockStatus: status ? 1 : 0,
        lockType: 1
      }
      this.handleLockOrder(data)
    },
    lockAll(status) {
      const lockIds = []
      this.tableData.forEach((item) => {
        if (item.auditName && item.auditName == this.userName) {
          lockIds.push(item.orderNo)
        } else {
          lockIds.push(item.orderNo)
        }
      })
      const data = {
        idList: lockIds,
        lockStatus: status ? 1 : 0,
        lockType: 2
      }
      this.handleLockOrder(data)
    },
    openBatchReviewDialog() {
      this.batchReviewDialog.formData.ids = []
      if (this.lockedArr.length > 0) {
        this.batchReviewDialog.visible = true
        this.batchReviewDialog.pageType = 'i'
        this.batchReviewDialog.amounts = {}
        this.batchReviewDialog.formData.remark = undefined
        this.batchReviewDialog.totalRebateAmount = 0
        this.batchReviewDialog.totalRecords = this.lockedArr.length
        const amounts = {}
        this.lockedArr.forEach((item) => {
          this.batchReviewDialog.formData.ids.push(item.orderNo)
          this.batchReviewDialog.totalRebateAmount +=
            item.commissionAmount
          if (amounts[item.currency]) {
            amounts[item.currency] = new Decimal(
              amounts[item.currency]
            )
              .add(item.commissionAmount)
              .toNumber()
          } else {
            amounts[item.currency] = new Decimal(
              item.commissionAmount
            ).toNumber()
          }
        })
        this.batchReviewDialog.amounts = amounts
      }
    },
    onBatchReviewDialogClose() {
      this.$refs.batchAuditForm.resetFields()
    },
    handleBatchReview() {
      this.batchReviewDialog.loading = true
      const params = {
        auditStatus: this.batchReviewDialog.btnType,
        ids: this.batchReviewDialog.formData.ids,
        remark: this.batchReviewDialog.formData.remark
      }

      this.$api
        .getProxyCommissionCashAuditRecord(params)
        .then((res) => {
          this.$message.success(
            this.$t('funds.fund_audit.batcha_audit_success')
          )
          this.batchReviewDialog.visible = false
          this.batchReviewDialog.loading = false
          this.search()
        })
        .catch(() => {
          this.batchReviewDialog.loading = false
        })
    },
    filterCycleDate(start, end) {
      start = start || '-'
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      this.updateIndexDB()
    },
    // 打开列设置弹框
    openColSettings() {
      this.getIndexDB(this.activityListField)
      this.colSettings.visible = true
    },
    clickDel() {
      this.dialogColumnData = {}
      this.dialogColumnData = {
        [this.$t('funds.fund_audit.audit')]: true,
        [this.$t('funds.order_no')]: true,
        [this.$t('report.rebate_cycle')]: true,
        [this.$t('funds.proxy_name')]: true,
        [this.$t('common.business_model')]: true,
        [this.$t(
          'funds.proxy_member_funds_record.proxy_level_name'
        )]: true,
        [this.$t(
          'funds.proxy_member_funds_record.parent_proxy_account'
        )]: true,
        [this.$t(
          'funds.proxy_member_funds_record.top_proxy_name'
        )]: true,
        [this.$t(
          'funds.other_venues_member_game_wins_and_losses'
        )]: true,
        [this.$t(
          'funds.total_rebate_for_members_of_other_venues'
        )]: true,
        [this.$t('funds.other_venue_agency_net_profit_and_loss')]: true,
        [this.$t('funds.other_venue_commission_rates')]: true,
        [this.$t('funds.other_venue_commissions')]: true,
        [this.$t('funds.texas_club_service_fee_sharing')]: true,
        [this.$t('funds.texas_club_insurance_share')]: true,
        [this.$t(
          'funds.texas_value_added_service_consumption_sharing'
        )]: true,
        [this.$t(
          'funds.proxy_member_funds_record.total_last_amount'
        )]: true,
        [this.$t('funds.comprehensive_commission')]: true,
        [this.$t('funds.fund_audit.audit_status')]: true,
        [this.$t('funds.fund_audit.lock_time')]: true,
        [this.$t('funds.fund_audit.lock_account')]: true,
        [this.$t('funds.apply_time')]: true
      }
    },
    handleExportExcel() {
      const params = this.handleParams()
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'getProxyCommissionAuditExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
	border-bottom: 1px solid #00000015;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.divBox {
	display: flex;
	.el-select {
		width: 100px;
	}
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
	line-height: 28px;
	margin-right: 20px;
}
.grid-content {
	height: 45px;
	line-height: 45px;
	padding: 2px 22px;
	border: 1px solid #ebeef5;
}
.batch-review {
	.el-dialog__title {
		font-weight: 550;
	}
	.el-dialog__body {
		padding: 10px 20px;
	}
	.review-wrapper {
		height: auto;
		display: flex;
		flex-direction: column;
		border: 1px solid rgba(0, 0, 0, 0.164);
		.top {
			border-bottom: 1px solid rgba(0, 0, 0, 0.164);
			.check-details {
				padding: 10px;
				font-size: 15px;
				font-weight: 600;
				span {
					font-size: 12px;
					color: #038eff;
					cursor: pointer;
				}
			}
			.el-row {
				text-align: center;
				.title {
					background-color: rgba(0, 0, 0, 0.08);
					border-top: 1px solid rgba(0, 0, 0, 0.164);
					border-bottom: 1px solid rgba(0, 0, 0, 0.164);
					font-weight: 550;
				}
				.border-right {
					border-right: 1px solid rgba(0, 0, 0, 0.164);
				}

				.el-col {
					height: 40px;
					line-height: 40px;
				}
				.amounts-list {
					border-left: 1px solid rgba(0, 0, 0, 0.164);
					height: auto;
					min-height: 40px;
					padding: 10px 0;
					line-height: 20px;
				}
			}
		}
		.bottom {
			flex: 1;
			.remark-wrapper {
				display: flex;
				height: 100%;
				.left {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: space-around;
					width: 100px;
					border-right: 1px solid rgba(0, 0, 0, 0.164);
					position: relative;
					&::after {
						content: '*';
						color: red;
						position: absolute;
						top: 72px;
						left: 12px;
					}
				}
				.right {
					flex: 1;
					padding: 12px 10px 0px;
				}
			}
		}
	}

	.detail-header {
		.title {
			font-weight: 600;
			font-size: 15px;
		}
		display: flex;
		justify-content: space-between;
		border: 1px solid #ebeef5;
		align-items: center;
		padding: 10px;
	}
	::v-deep .el-table {
		margin-bottom: 10px;
	}
	::v-deep .el-textarea__inner {
		border: 0 none;
	}
	::v-deep .el-form-item__error {
		top: 155px;
	}
	::v-deep .el-table {
		margin-bottom: 10px;
	}
}
::v-deep .el-input-group__prepend {
	width: 110px;
}
.center-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.el-input-number_container {
	display: inline-block;
	position: relative;
	.close_icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: #ccc;
	}
}
</style>
